<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>可编辑的SVG线</title>
  <style>
    /* 添加一些基本样式来渲染SVG容器 */
    #svg-container {
      border: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <h1>可编辑的SVG线</h1>

  <!-- SVG容器 -->
  <svg id="svg-container" width="800" height="400">
  </svg>

  <!-- 控制线条属性的元素 -->
  <div>
    <label for="line-width">线条宽度:</label>
    <input type="range" id="line-width" min="1" max="10" value="2">
  </div>

  <div>
    <label for="line-length">线条长度:</label>
    <input type="range" id="line-length" min="50" max="750" value="200">
  </div>

  <div>
    <label for="line-color">线条颜色:</label>
    <input type="color" id="line-color" value="#000000">
  </div>

  <!-- 添加新线按钮 -->
  <button id="add-line">添加新线</button>

  <!-- 删除选定线按钮 -->
  <button id="delete-line">删除选定线</button>

  <!-- 设置线条方向 -->
  <div>
    <label for="line-direction">线条方向:</label>
    <select id="line-direction">
      <option value="horizontal">水平</option>
      <option value="vertical">垂直</option>
    </select>
  </div>

  <script>
    // 获取SVG容器和其他元素
    const svgContainer = document.getElementById("svg-container");
    const lineWidthInput = document.getElementById("line-width");
    const lineLengthInput = document.getElementById("line-length");
    const lineColorInput = document.getElementById("line-color");
    const addLineButton = document.getElementById("add-line");
    const deleteLineButton = document.getElementById("delete-line");
    const lineDirectionSelect = document.getElementById("line-direction");

    // 监听线条属性的变化
    lineWidthInput.addEventListener("input", updateLineAttributes);
    lineLengthInput.addEventListener("input", updateLineAttributes);
    lineColorInput.addEventListener("input", updateLineAttributes);

    // 初始化拖动功能
    let isDragging = false;
    let activeLine = null;
    let offset = { x: 0, y: 0 };

    svgContainer.addEventListener("mousedown", startDrag);
    svgContainer.addEventListener("mousemove", dragLine);
    svgContainer.addEventListener("mouseup", endDrag);

    // 更新线条属性的函数
    function updateLineAttributes() {
      if (activeLine) {
        const newLineWidth = lineWidthInput.value;
        const newLineLength = lineLengthInput.value;
        const newLineColor = lineColorInput.value;

        activeLine.setAttribute("stroke-width", newLineWidth);
        if (lineDirectionSelect.value === "horizontal") {
          activeLine.setAttribute("x2", parseInt(activeLine.getAttribute("x1")) + parseInt(newLineLength));
          activeLine.setAttribute("y2", activeLine.getAttribute("y1"));
        } else {
          activeLine.setAttribute("x2", activeLine.getAttribute("x1"));
          activeLine.setAttribute("y2", parseInt(activeLine.getAttribute("y1")) + parseInt(newLineLength));
        }
        activeLine.setAttribute("stroke", newLineColor);
      }
    }

    // 添加新线的事件处理
    addLineButton.addEventListener("click", function () {
      const newLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
      newLine.setAttribute("class", "editable-line");
      newLine.setAttribute("x1", 100);
      newLine.setAttribute("y1", 200);
      newLine.setAttribute("x2", 300);
      newLine.setAttribute("y2", 200);
      newLine.setAttribute("stroke", "black");
      newLine.setAttribute("stroke-width", 2);

      // 将新线添加到SVG容器
      svgContainer.appendChild(newLine);
    });

    // 删除选定线的事件处理
    deleteLineButton.addEventListener("click", function () {
      if (activeLine) {
        svgContainer.removeChild(activeLine);
        activeLine = null;
      }
    });

    // 开始拖动线条
    function startDrag(event) {
      if (event.target.classList.contains("editable-line")) {
        isDragging = true;
        activeLine = event.target;

        // 计算鼠标点击位置与线条起点的偏移
        const lineStartX = parseInt(activeLine.getAttribute("x1"));
        const lineStartY = parseInt(activeLine.getAttribute("y1"));
        offset.x = event.clientX - lineStartX;
        offset.y = event.clientY - lineStartY;
      }
    }

    // 拖动线条
    function dragLine(event) {
      if (isDragging && activeLine) {
        const newX1 = event.clientX - offset.x;
        const newY1 = event.clientY - offset.y;

        // 更新线条起点坐标
        activeLine.setAttribute("x1", newX1);
        activeLine.setAttribute("y1", newY1);

        // 更新线条属性
        updateLineAttributes();
      }
    }

    // 结束拖动
    function endDrag() {
      isDragging = false;
    }
  </script>
</body>

</html>